<template>
    <div class="refreshpage">
        <el-progress class="refreshpage_progress"
        type="circle" :percentage="percentage"
        :show-text="false">
        </el-progress>
        <div
        class="refreshpage_loading"
        type="primary"
        v-loading="fullscreenLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading">
        </div>
        <div class="progresschangenum">{{changenum}}%</div>
    </div>
</template>

<script>
export default {
    name:'XiaoOLProgress',
    data() {
        return {
            percentage:0,
            fullscreenLoading: true,
            changenum:0,
            timer:null,
        }
    },
    mounted(){
        const timer =  setInterval(() => {
            if(this.changenum == 99){
                this.changenum=99
            }else{
                this.changenum+=11
            }
            if(this.percentage=100){
                this.percentage=100
            }else{
                this.percentage+=2
            }
        }, 15);
        console.log('我是中转组件哦');
        this.$once('hook:beforeDestroy',()=>{
            clearInterval(timer)
        })
        setTimeout(() => {
            this.$bus.$emit('RefreshPage',1)
        }, 350);
    },
}
</script>

<style scoped>
.progresschangenum{
    margin-left: -230px;
    margin-top: 25px;
    color: rgb(245, 43, 104);
    text-align: center;
}
.refreshpage{
    margin: 0px auto;
    padding-left: 200px;
    padding-top: 120px;
    height: 300px;
    width: 400px;
}
.refreshpage_progress{
    margin-left: 20px;
    margin-top: 20px;
}
.refreshpage_loading{
    margin-left: -235px;
    margin-top: -70px;
}
</style>